<template>
  <div class="card-wrap quick-entry">
    <Title title="快捷入口" />
    <a-popconfirm :on-before-ok="addUrl" position="bottom" @cancel="addInfo = {}">
      <template #content>
        <div class="flex-c">
          <span>名称：</span>
          <a-input size="mini" style="width: 160px" v-model="addInfo.name" />
        </div>
        <div class="flex-c" style="margin-top: 10px">
          <span>网址：</span>
          <a-input size="mini" style="width: 160px" v-model="addInfo.url" />
        </div>
      </template>
      <div class="show-all">
        <icon-plus />
        <span>新增</span>
      </div>
    </a-popconfirm>
    <a-scrollbar style="height: 350px; overflow: auto; margin-top: 10px">
      <ul>
        <li v-for="(item, i) in entryList" :key="i" class="flex">
          <div class="icon-w">
            <i class="icon icon-wangzhi"></i>
          </div>
          <div class="info-w">
            <TextLimit class="limit" :rows="1">{{ item.name }}</TextLimit>
            <TextLimit class="limit" :rows="1">{{ item.url }}</TextLimit>
          </div>
          <a-space class="handle-w">
            <a-popconfirm :on-before-ok="editUrl" position="bottom" @popup-visible-change="editInfo = JSON.parse(JSON.stringify(item))">
              <template #content>
                <div class="flex-c">
                  <span>名称：</span>
                  <a-input size="mini" style="width: 160px" v-model="editInfo.name" />
                </div>
                <div class="flex-c" style="margin-top: 10px">
                  <span>网址：</span>
                  <a-input size="mini" style="width: 160px" v-model="editInfo.url" />
                </div>
              </template>
              <icon-edit />
            </a-popconfirm>
            <a-popconfirm content="是否删除该快捷入口?" @ok="entryList.splice(i, 1)" type="warning">
              <icon-delete />
            </a-popconfirm>
          </a-space>
        </li>
      </ul>
    </a-scrollbar>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import Title from './Title.vue'
  import { Message } from '@arco-design/web-vue'
  const entryList = ref<Array<any>>([
    {
      icon: '',
      name: '亚马逊卖家中心',
      url: 'amazon.com/22323wwrw/hwrieoqwueo',
    },
    {
      icon: '',
      name: '亚马逊卖家中心',
      url: 'amazon.com/22323wwrw',
    },
    {
      icon: '',
      name: '亚马逊卖家中心',
      url: 'amazon.com/22323wwrw',
    },
    {
      icon: '',
      name: '亚马逊卖家中心',
      url: 'amazon.com/22323wwrw',
    },
  ])
  const addInfo = ref<any>({})
  const editInfo = ref<any>({})

  function addUrl() {
    if (!addInfo.value.name || !addInfo.value.url) {
      Message.error('请输入名称和网址')
      return false
    }
    entryList.value.push(addInfo.value)
    return true
  }
  function editUrl() {
    if (!editInfo.value.name || !editInfo.value.url) {
      Message.error('请输入名称和网址')
      return false
    }
    return false
  }
</script>

<style lang="less" scoped>
  .quick-entry {
    width: 250px;
    ul {
      li {
        padding: 5px 10px;
        font-size: 12px;
        cursor: pointer;
        padding-right: 48px;
        overflow: hidden;
        position: relative;
        &:hover {
          background-color: rgb(var(--primary-1));
          .handle-w {
            display: inline-flex;
          }
        }
      }
    }
    .icon-w {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      font-size: 14px;
      background-color: #eee;
      margin-right: 5px;
      flex-shrink: 0;
      color: rgb(var(--primary-6));
    }
    .info-w {
      flex: 1;
      .limit {
        width: 140px;
      }
      div {
        line-height: 16px;
      }
    }
    .handle-w {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translate(0, -50%);
      display: none;
    }
  }
</style>
<style scoped>
  @media screen and (max-width: 1500px) {
    .quick-entry {
      width: 220px !important;
    }
    li {
      padding: 5px !important;
    }
    .limit {
      width: 110px !important;
    }
  }
</style>
